<template>
	<aside class="sidebar-dark-primary elevation-4" style="background-color: #123256">

		<c-context class="aside-contexts" @input="onContextSelected"/>

		<nuxt-link to="/" class="brand-link align-bottom">
			<img src="/favicon.svg" class="brand-image">
			<span class="brand-text text-info font-weight-bold align-bottom"> N</span><span class="align-bottom">Stack云原生</span>
		</nuxt-link>

		<!-- Sidebar -->
		<div class="aside-menus" >
			<!-- Sidebar Menu -->
			<nav class="mt-2">
				<ul class="nav nav-pills nav-sidebar flex-column nav-child-indent nav-compact" data-widget="treeview" role="menu" data-accordion="false">
					<li class="nav-item has-treeview menu-open">
<!--						<a href="#" class="nav-link" v-on:click="isVisible.cluster=!isVisible.cluster"><i class="nav-icon fas fa-cloud"></i><p>Cluster<i v-bind:class="isVisible.cluster?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>-->
            <a href="#" class="nav-link" v-on:click="isVisible.cluster=!isVisible.cluster"><i class="nav-icon fas fa-cloud"></i><p>集群<i v-bind:class="isVisible.cluster?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>
						<b-collapse v-model="isVisible.cluster">
							<ul class="nav d-block nav-treeview">
<!--								<li class="nav-item small"><nuxt-link to="/cluster/node.list"  class="nav-link"><i class="nav-icon text-sm mr-0">N</i><p>odes</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/cluster/topology"  class="nav-link"><i class="nav-icon text-sm mr-0">T</i><p>opology</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/cluster/namespace.list"  class="nav-link"><i class="nav-icon text-sm mr-0">N</i><p>amespaces</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/cluster/event.list"  class="nav-link"><i class="nav-icon text-sm mr-0">E</i><p>vents</p></nuxt-link></li>-->
                <li class="nav-item small"><nuxt-link to="/cluster/namespace.list"  class="nav-link"><p>命名空间</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/cluster/node.list"  class="nav-link"><p>节点</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/cluster/topology"  class="nav-link"><p>拓扑结构</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/cluster/event.list"  class="nav-link"><p>事件</p></nuxt-link></li>
							</ul>
						</b-collapse>
					</li>
					<li class="nav-item menu-open">
<!--						<a href="#" class="nav-link" v-on:click="isVisible.workload=!isVisible.workload"><i class="nav-icon fas fa-server"></i><p>Workload<i v-bind:class="isVisible.workload?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>-->
            <a href="#" class="nav-link" v-on:click="isVisible.workload=!isVisible.workload"><i class="nav-icon fas fa-server"></i><p>工作负载<i v-bind:class="isVisible.workload?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>
						<b-collapse v-model="isVisible.workload">
							<ul class="nav d-block nav-treeview">
								<!--								<li class="nav-item small"><nuxt-link to="/workload/overview"  class="nav-link"><i class="nav-icon text-sm mr-0">O</i><p>verview</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/workload/pod.list"  class="nav-link"><i class="nav-icon text-sm mr-0">P</i><p>ods</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/workload/deployment.list"  class="nav-link"><i class="nav-icon text-sm mr-0">D</i><p>eployments</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/workload/statefulset.list"  class="nav-link"><i class="nav-icon text-sm mr-0">S</i><p>tateful Sets</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/workload/cornjob.list"  class="nav-link"><i class="nav-icon text-sm mr-0">C</i><p>ron Jobs</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/workload/job.list"  class="nav-link"><i class="nav-icon text-sm mr-0">J</i><p>obs</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/workload/daemonset.list"  class="nav-link"><i class="nav-icon text-sm mr-0">D</i><p>aemon Sets</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/workload/replicaset.list"  class="nav-link"><i class="nav-icon text-sm mr-0">R</i><p>eplica Sets</p></nuxt-link></li>-->
                <li class="nav-item small"><nuxt-link to="/workload/pod.list"  class="nav-link"><p>Pods</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/workload/deployment.list"  class="nav-link"><p>部署</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/workload/statefulset.list"  class="nav-link"><p>有状态集</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/workload/cornjob.list"  class="nav-link"><p>定时作业</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/workload/job.list"  class="nav-link"><p>作业</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/workload/daemonset.list"  class="nav-link"><p>守护进程</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/workload/replicaset.list"  class="nav-link"><p>副本集</p></nuxt-link></li>
							</ul>
						</b-collapse>
					</li>
					<li class="nav-item menu-open">
<!--						<a href="#" class="nav-link" v-on:click="isVisible.networking=!isVisible.networking"><i class="nav-icon fas fa-network-wired"></i><p>Networking<i v-bind:class="isVisible.networking?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>-->
            <a href="#" class="nav-link" v-on:click="isVisible.networking=!isVisible.networking"><i class="nav-icon fas fa-network-wired"></i><p>网络<i v-bind:class="isVisible.networking?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>
						<b-collapse v-model="isVisible.networking">
							<ul class="nav d-block nav-treeview">
<!--								<li class="nav-item small"><nuxt-link to="/networking/service.list"  class="nav-link"><i class="nav-icon text-sm mr-0">S</i><p>ervices</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/networking/ingress.list"  class="nav-link"><i class="nav-icon text-sm mr-0">I</i><p>ngresses</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/networking/endpoint.list"  class="nav-link"><i class="nav-icon text-sm mr-0">E</i><p>ndpoints</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/networking/networkpolicy.list"  class="nav-link"><i class="nav-icon text-sm mr-0">N</i><p>etwork Policies</p></nuxt-link></li>-->
                <li class="nav-item small"><nuxt-link to="/networking/service.list"  class="nav-link"><p>服务</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/networking/ingress.list"  class="nav-link"><p>入口</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/networking/endpoint.list"  class="nav-link"><p>端点</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/networking/networkpolicy.list"  class="nav-link"><p>网络策略</p></nuxt-link></li>
							</ul>
						</b-collapse>
					</li>
					<li class="nav-item menu-open">
<!--						<a href="#" class="nav-link" v-on:click="isVisible.storage=!isVisible.storage"><i class="nav-icon fas fa-hdd"></i><p>Storage<i v-bind:class="isVisible.storage?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>-->
            <a href="#" class="nav-link" v-on:click="isVisible.storage=!isVisible.storage"><i class="nav-icon fas fa-hdd"></i><p>磁盘<i v-bind:class="isVisible.storage?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>
						<b-collapse v-model="isVisible.storage">
							<ul class="nav d-block nav-treeview">
<!--								<li class="nav-item small"><nuxt-link to="/storage/pvc.list"  class="nav-link"><i class="nav-icon text-sm mr-0">P</i><p>ersistent Volume Claims</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/storage/pv.list"  class="nav-link"><i class="nav-icon text-sm mr-0">P</i><p>ersistent Volumes</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/storage/storageclass.list"  class="nav-link"><i class="nav-icon text-sm mr-0">S</i><p>troage Classes</p></nuxt-link></li>-->
                <li class="nav-item small"><nuxt-link to="/storage/pvc.list"  class="nav-link"><p>持久卷声明</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/storage/pv.list"  class="nav-link"><p>持久卷</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/storage/storageclass.list"  class="nav-link"><p>存储类</p></nuxt-link></li>
							</ul>
						</b-collapse>
					</li>
					<li class="nav-item menu-open">
<!--						<a href="#" class="nav-link" v-on:click="isVisible.configuration=!isVisible.configuration"><i class="nav-icon fas fa-cog"></i><p>Configuration<i v-bind:class="isVisible.configuration?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>-->
            <a href="#" class="nav-link" v-on:click="isVisible.configuration=!isVisible.configuration"><i class="nav-icon fas fa-cog"></i><p>配置<i v-bind:class="isVisible.configuration?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>
						<b-collapse v-model="isVisible.configuration">
							<ul class="nav d-block nav-treeview">
								<li class="nav-item small"><nuxt-link to="/configuration/configmap.list"  class="nav-link"><p>配置表</p></nuxt-link></li>
<!--								<li class="nav-item small"><nuxt-link to="/configuration/secret.list"  class="nav-link"><p>敏感数据</p></nuxt-link></li>-->
								<li class="nav-item small"><nuxt-link to="/configuration/resourcequota.list"  class="nav-link"><p>资源配额</p></nuxt-link></li>
								<li class="nav-item small"><nuxt-link to="/configuration/limitrange.list"  class="nav-link"><p>限制范围</p></nuxt-link></li>
								<li class="nav-item small"><nuxt-link to="/configuration/hpa.list"  class="nav-link"><p>弹性伸缩算法库</p></nuxt-link></li>
<!--								<li class="nav-item small"><nuxt-link to="/configuration/poddisruptionbudget.list"  class="nav-link"><p>中断预算</p></nuxt-link></li>-->
<!--								<li class="nav-item small"><nuxt-link to="/configuration/poddisruptionbudget.list"  class="nav-link"><p>弹性伸缩算法库</p></nuxt-link></li>-->
							</ul>
						</b-collapse>
					</li>
					<li class="nav-item menu-open">
<!--						<a href="#" class="nav-link" v-on:click="isVisible.administrator=!isVisible.administrator"><i class="nav-icon fas fa-users-cog"></i><p>Administrator<i v-bind:class="isVisible.administrator?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>-->
            <a href="#" class="nav-link" v-on:click="isVisible.administrator=!isVisible.administrator"><i class="nav-icon fas fa-users-cog"></i><p>管理员<i v-bind:class="isVisible.administrator?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>
						<b-collapse v-model="isVisible.administrator">
							<ul class="nav d-block nav-treeview">
								<li class="nav-item small"><nuxt-link to="/administrator/serviceaccount.list"  class="nav-link"><p>服务账户</p></nuxt-link></li>
								<li class="nav-item small"><nuxt-link to="/administrator/clusterrole.list"  class="nav-link"><p>集群角色</p></nuxt-link></li>
								<li class="nav-item small"><nuxt-link to="/administrator/clusterrolebinding.list"  class="nav-link"><p>集群角色绑定</p></nuxt-link></li>
								<li class="nav-item small"><nuxt-link to="/administrator/role.list"  class="nav-link"><p>角色</p></nuxt-link></li>
								<li class="nav-item small"><nuxt-link to="/administrator/rolebinding.list"  class="nav-link"><p>角色绑定</p></nuxt-link></li>
							</ul>
						</b-collapse>
					</li>
					<!--custom resource -->
<!--					<li class="nav-item menu-open mw-100">-->
<!--&lt;!&ndash;						<a href="#" class="nav-link" v-on:click="isVisible.crd=!isVisible.crd"><i class="nav-icon fas fa-puzzle-piece"></i><p>Custom Resource<i v-bind:class="isVisible.crd?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>&ndash;&gt;-->
<!--            <a href="#" class="nav-link" v-on:click="isVisible.crd=!isVisible.crd"><i class="nav-icon fas fa-puzzle-piece"></i><p>自定义资源<i v-bind:class="isVisible.crd?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>-->
<!--						<b-collapse v-model="isVisible.crd">-->
<!--							&lt;!&ndash;custom resource : group &ndash;&gt;-->
<!--							<ul class="nav d-block nav-treeview">-->
<!--								<li class="nav-item small"><nuxt-link to="/customresource/customresourcedefinitions.list"  class="nav-link"><p>定义</p></nuxt-link></li>-->
<!--								<ul class="nav nav-pills nav-sidebar flex-column nav-child-indent nav-compact" data-widget="treeview" role="menu" data-accordion="false">-->
<!--									<li v-for="(group, nm) in crdList" :key="nm" class="nav-item small mw-100">-->
<!--										<a href="#" class="nav-link" v-on:click="isVisible.crdGroup[nm] = !isVisible.crdGroup[nm]"><p class="text-truncate mw-100 pr-2">{{ nm }}<i v-bind:class="1==1 ? 'fa-angle-down':'fa-angle-left'" class="right fas"></i></p></a>-->
<!--										&lt;!&ndash;custom resource : group > crd &ndash;&gt;-->
<!--										<b-collapse v-model="isVisible.crdGroup[nm]">-->
<!--											<ul class="nav d-block nav-treeview">-->
<!--												<li v-for="(crd, crdnm) in group"  :key="crdnm" class="nav-item" >-->
<!--													<nuxt-link :to="toCRDLink(crd)"  class="nav-link pl-2 pt-0 pb-0" replace>-->
<!--														<p class="text-truncate mw-100"><b-icon icon="dot"></b-icon>{{ crd.kind }}</p>-->
<!--													</nuxt-link>-->
<!--												</li>-->
<!--											</ul>-->
<!--										</b-collapse>-->
<!--									</li>-->
<!--								</ul>-->
<!--							</ul>-->
<!--						</b-collapse>-->
<!--					</li>&lt;!&ndash;// custom resource &ndash;&gt;-->

				</ul>
			</nav><!-- /.sidebar-menu -->
		</div>
	</aside>
</template>
<style scoped>
.aside-menus .nav-link {color:#c2c7d0; }
.aside-menus .nuxt-link-active:focus {background-color : rgba(255,255,255,.2)!important; }
.aside-menus .nuxt-link-exact-active {background-color : rgba(255,255,255,.2); }
</style>

<script>
import VueContext	from "@/layouts/components/context.vue";
export default {
	components: {
		"c-context": VueContext,
	},
	data() {
		return {
			isVisible: {
				cluster: true,
				workload: true,
				networking: true,
				storage: true,
				configuration: true,
				administrator: true,
				crd : true,
				crdGroup: {}
			},
			crdList: {}
		}
	},
	methods: {
		onContextSelected(data) {
			this.namespaces(data.currentContext.namespaces);
			this.resources(data.currentContext.resources);
			this.statusbar({message: "", kubernetesVersion: data.currentContext.kubernetesVersion, platform: data.currentContext.platform})
			this.crdList = {}
			for(let r in this.resources()) {
				if( !r.endsWith("k8s.io") && r.indexOf(".") > 0 ) {
					this.crdList[r] = this.resources()[r];
				}
			};
			this.isVisible.crdGroup = {};
			this.$nuxt.$emit("context-selected");
		},
		toCRDLink(crd) {
			let a = crd.groupVersion.split("/");
			let query = {group: a[0], crd: crd.name,  name:crd.kind, version: ""};
			if (a.length > 1) query.version = a[1];
			return {path: '/customresource/customresource.list', query: query}
		}
	}
}
</script>